<script lang="ts">
import { defineComponent, ref, toRaw, type PropType } from "vue";

export default defineComponent({
  props: {
    modelValue: {
      type: Object as PropType<{ type: number; id: string }>,
      required: true,
    },
    listData: {
      type: Array as PropType<{ id: number; name: string; list: any[] }[]>,
      required: true,
    },
  },
  emits: { change: () => true },
  setup(props, ctx) {
    const typeClick = (index: number) => {
      const item = props.listData[index];
      props.modelValue.type = item.id;
      cityList.value = item.list || [];
      props.modelValue.id = item.list ? item.list[0].id : "";
      ctx.emit("change");
    };

    const cityList = ref<any[]>([]);
    const cityClick = (id: string) => {
      props.modelValue.id = id;
      ctx.emit("change");
    };

    cityList.value =
      props.listData.find((i) => i.id === props.modelValue.type)?.list || [];

    return { typeClick, cityList, cityClick };
  },
});
</script>

<template>
  <view class="query-type">
    <view
      class="query-type-item"
      :class="{ 'query-type-active': modelValue.type === i.id }"
      v-for="(i, d) of listData"
      :key="i.id"
      @click="typeClick(d)"
    >
      {{ i.name }}
    </view>
  </view>

  <scroll-view
    class="query-city"
    v-if="cityList.length > 0"
    scroll-x
    enhanced
    :show-scrollbar="false"
  >
    <view class="query-city-space"></view>
    <view
      class="query-city-item"
      :class="{ 'query-city-active': modelValue.id === i.id }"
      v-for="i of cityList"
      :key="i.id"
      @click="cityClick(i.id)"
    >
      {{ i.name }}
    </view>
  </scroll-view>
</template>

<style lang="scss">
.query-type {
  position: relative;
  display: flex;
  align-items: center;
  padding: 10rpx 30rpx;

  .query-type-item {
    padding: 0 30rpx;
    margin-right: 30rpx;
    font-size: 28rpx;
    color: #999999;
    line-height: 56rpx;
    border-radius: 20rpx;
    border: 2rpx solid #eeeeee;
  }

  .query-type-active {
    color: #ffffff;
    border-radius: 20rpx;
    background: linear-gradient(90deg, #03c8cc 0%, #0ad388 100%);
  }
}

.query-city {
  position: relative;
  width: 100%;
  height: 70rpx;
  padding-top: 20rpx;
  white-space: nowrap;

  .query-city-space,
  .query-city-item {
    display: inline-block;
    vertical-align: top;
  }

  .query-city-space {
    width: 30rpx;
  }

  .query-city-item {
    padding-left: 20rpx;
    padding-right: 20rpx;
    margin-right: 10rpx;
    font-size: 28rpx;
    color: #666666;
    line-height: 50rpx;
  }

  .query-city-active {
    color: #0ad388;
  }
}
</style>